<template lang="pug">
.cases-detail-container
  .case-detail-main-container
    el-row
      h1.h2.mb-3 {{caseDetail.caseName}}
      .d-flex.align-items-center.justify-content-between.flex-wrap.mb-4
        .d-flex.align-items-center
          a.d-flex.align-items-center(href='/u/yinghualuo')
            picture.mr-2.d-sm-block.d-none
              img.d-inline-block.rounded-circle(src='https://avatar-static.segmentfault.com/224/174/2241741281-58f6cf1015183_huge128' alt='' width='32')
            strong.align-self-center.font-size-14 腹中有书气自华
          time.text-secondary.font-size-14(datetime='caseDetail.createTime' itemprop='datePublished' style='margin-left:12px')
            | 创建于
            //
            | {{caseDetail.createTime | parseTime}}
      aside
        | {{ caseDetail.description }}

</template>

<script>
import Tinymce from '@/components/Tinymce'
import Upload from '@/components/Upload/SingleImage3'
import MDinput from '@/components/MDinput'
import Sticky from '@/components/Sticky' // 粘性header组件
import { fetchCase } from '@/api/cases'
import {
  CommentDropdown,
  PlatformDropdown,
  SourceUrlDropdown
} from './Dropdown'

export default {
  name: 'CasesDetail',
  components: {
    Tinymce,
    MDinput,
    Upload,
    Sticky,
    CommentDropdown,
    PlatformDropdown,
    SourceUrlDropdown
  },
  data() {
    return {
      caseDetail: {},
      loading: false,
      userListOptions: [],
      tempRoute: {}
    }
  },
  computed: {
    contentShortLength() {
      return this.caseDetail.content_short.length
    },
    lang() {
      return this.$store.getters.language
    }
  },
  created() {
    const caseid = this.$route.query.id
    this.fetchCaseDetail(caseid)

    // Why need to make a copy of this.$route here?
    // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
    // https://github.com/PanJiaChen/vue-element-admin/issues/1221
    this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    fetchCaseDetail(id) {
      fetchCase(id)
        .then(response => {
          this.caseDetail = response.data
          // set tagsview title
          this.setTagsViewTitle()
        })
        .catch(err => {
          console.log(err)
        })
    },
    setTagsViewTitle() {
      const title = this.lang === 'zh' ? '案件详情' : 'Case Detail'
      const route = Object.assign({}, this.tempRoute, {
        title: `${title}-${this.caseDetail.id.slice(-4)}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.cases-detail-container {
  position: relative;

  .case-detail-main-container {
    padding: 0px 45px 20px 45px;
    .h2,
    h2 {
      font-size: 2rem;
      font-weight: 500;
    }

    .justify-content-between {
      justify-content: space-between !important;
    }
    a {
      color: #00965e;
      text-decoration: none;
      background-color: transparent;
    }
    .mr-2,
    .mx-2 {
      margin-right: 0.5rem !important;
    }
    .d-sm-block {
      display: block !important;
    }
    .align-items-center {
      align-items: center !important;
    }
    .rounded-circle {
      border-radius: 50% !important;
    }
    .d-inline-block {
      display: inline-block !important;
    }
    .mb-3 {
      margin-bottom: 1rem !important;
    }
    .d-flex {
      display: flex !important;
    }
    .text-secondary {
      color: #6c757d !important;
    }
    .font-size-14 {
      font-size: 0.875rem !important;
    }
    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}
</style>
